<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 事件源： -->
     <button onclick="alert('你好！')">点击</button>
     <!-- 事件监听：绑定事件、触发事件 
        1.HTML属性中提供了on + 事件类型：耦合性高，代码复用率低(不怎么推荐)
        2.DOM0绑定事件：对象.属性(on + 事件类型) = 事件处理函数
        3.DOM2绑定事件：对象.方法();
     -->
    <button class="ck">点击2</button>
    <script>
        //获取节点
        const btn = document.querySelector('.ck');
        //对象.属性 = 事件处理程序(函数)；
        btn.onclick = function(){
            alert('hello btn2');
        }
        btn.onclick = null;   //移出事件
    </script>
    <button id="btn">点击3</button>
    <script>
        const ck = document.querySelector('#btn');
        //添加事件监听(函数)addEventListener('事件类型','事件处理函数',[true/false]);
        //事件类型不需要前缀 on 
        ck.addEventListener('click',test)
        ck.removeEventListener('click',test)
        let test = function(){
            alert('hello btn3');
        }

    </script>

</body>
</html>